<template>
  <div class="p-4">
    <!--定义表格-->
    <BasicTable @register="registerTable">

      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" name="basic-table-demo" setup>
  import { ActionItem, BasicColumn, BasicTable, FormSchema, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { defHttp } from '/@/utils/http/axios';
  //定义表格列
  const columns: BasicColumn[] = [
    {
      title: '采购订单',
      dataIndex: 'purchaseOrder',
      width: 170,
      align: 'left',
      resizable: true,

    },
    {
      title: '物料编码',
      dataIndex: 'materialCode',
      width: 130,
      resizable: true,
    },
    {
      title: '采购订单数量',
      dataIndex: 'purchaseOrderQuantity',
      width: 140,
      resizable: true,
    },
    {
      title: '已入库',
      dataIndex: 'incomingQuantity',
      width: 140,
      resizable: true,

    },
    {
      title: '出库',
      dataIndex: 'outboundQuantity',
      width: 140,
      resizable: true,
    },
    {
      title: '测试数量',
      dataIndex: 'numberOfTests',

      width: 120,
      resizable: true,
    },
    {
      title: '测试不良数量',
      dataIndex: 'numberOfDefectsTested',
      width: 120,
      resizable: true,
    },
    {
      title: '外观检验数量',
      dataIndex: 'quantityOfVisualInspection',
      width: 120,
      resizable: true,
    },

    {
      title: '外观不良数量',
      dataIndex: 'numberOfBadAppearance',
      width: 120,
      resizable: true,
    },
    {
      title: '直通率',
      dataIndex: 'passRate',
      width: 120,
      resizable: true,
    },
  ];
  //表单搜索字段
  const searchFormSchema: FormSchema[] = [
    {
      label: '物料号', //显示label
      field: 'materialCode', //查询字段
      component: 'JInput',
    },
    {
      label: '日期时间范围',
      field: 'dateTimeRangeSelect',
      component: 'RangePicker',
      componentProps: {
        //日期格式化
        format:'YYYY/MM/DD',
        valueFormat:'YYYY/MM/DD 00:00:00',
        showToday:true,
        allowEmpty:[ true, true],
        //范围文本描述用集合
        placeholder:['请选择开始日期时间','请选择结束日期时间']
      },
    },
  ];
  //ajax请求api接口
  const demoListApi = (params) => {
    // 将params 对象中的所有属性的*去掉
    params = JSON.parse(JSON.stringify(params).replace(/\*/g, ''));
    return defHttp.get({ url: '/orderInfo/getReportList', params });
  };



  // 列表页面公共参数、方法
  const { tableContext } = useListPage({
    designScope: 'basic-table-demo-filter',
    tableProps: {
      title: '表单搜索',
      api: demoListApi,
      columns: columns,
      formConfig: {
        schemas: searchFormSchema,
        fieldMapToTime: [['dateTimeRangeSelect', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
      },
      showActionColumn: false,
    },
  });
  //BasicTable绑定注册
  const [registerTable, { getForm }] = tableContext;

  /**
   * 操作栏
   */
  function getTableAction(record): ActionItem[] {
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
      },
    ];
  }

  function handleEdit(record) {
    let { getFieldsValue } = getForm();
    console.log('查询form的数据', getFieldsValue());
    console.log(record);
  }
</script>
